<template>
    <Header title="登录" />
    <div class="login">

        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input class="user_name" v-model="user_name" />
                </td>
            </tr>
            <tr>
                <td>密  码：</td>
                <td>
                    <input type="password" class="user_pwd" v-model="pwd" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button @click="login">登录</button>
                    <button @click="toRegister">注册</button>
                </td>     
            </tr>
        </table>    
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, toRefs } from "vue";
  import Header from "@/components/Header.vue";
  import { useRouter } from "vue-router";
  
  const router = useRouter()

  let data = reactive({
    user_name:'',
    pwd:''
  })

  const {user_name,pwd} = {...toRefs(data)}


  //登录
  function login(){
    if(localStorage.userInfo){
        const u = JSON.parse(localStorage.userInfo)
        console.log('login u:',u)
        if(u['user_name'] == user_name.value){
            if(u['password'] == pwd.value){
                alert('登录成功！')
                localStorage.setItem('isLogin','1')
                router.push('./home')
            }else{
                alert('密码错误，请重新输入！')
            }
        }else{
            alert('账号错误，请重新输入！')
        }
    }else{
        alert('您还没有注册过任何账号')
        router.push('./register')
    }
  }


      
  function toRegister(){
    router.push('./register')
  }
      

  



  </script>
  
  <style lang='less' scoped>
  .login {
    margin: 5px;
    font-size: 8px;
    .register {
      margin-top: 20px;
    }
  }
  </style>